<template>
	<view class="suggestion-box">
		<uni-forms ref="formRef" :modelValue="formData" class="form-s" :rules="formRules">
			<view class="form-1">
				<view class="view">管家: {{formData.steward}}</view>
				<span class="tags-icon color-icon-1" v-if="formData.commentType == 1">新租</span>
				<span class="tags-icon color-icon-2" v-if="formData.commentType == 2">续租</span>
				<span class="tags-icon color-icon-3" v-if="formData.commentType == 3">退租</span>
				<span class="tags-icon color-icon-4" v-if="formData.commentType == 4">员工入住评价</span>
				<span class="tags-icon color-icon-3" v-if="formData.commentType == 5">员工迁出</span>
			</view>
			<uni-forms-item class="uni-form-label" name="stewardScore" required>
				<view class="uni-label">管家服务</view>
				<uni-rate class="uni-rate" :max="5" v-model="formData.stewardScore" margin="8" />
			</uni-forms-item>
			
			<uni-forms-item class="uni-form-label" name="houseScore" required v-if="formData.commentType == 1 || formData.commentType == 4">
				<view class="uni-label">房屋环境</view>
				<uni-rate class="uni-rate" :max="5" v-model="formData.houseScore" margin="8" />
			</uni-forms-item>
			
			<uni-forms-item class="uni-form-label" name="propertyEnvScore" required v-if="formData.commentType == 1 || formData.commentType == 4">
				<view class="uni-label">物业环境</view>
				<uni-rate class="uni-rate" :max="5" v-model="formData.propertyEnvScore" margin="8" />
			</uni-forms-item>
			
			<uni-forms-item class="uni-form-label" name="aroundSupportScore" required v-if="formData.commentType == 1 || formData.commentType == 4">
				<view class="uni-label">周边配套</view>
				<uni-rate class="uni-rate" :max="5" v-model="formData.aroundSupportScore" margin="8" />
			</uni-forms-item>
			
			<uni-forms-item class="uni-form-label" name="checkInFeelScore" required v-if="formData.commentType == 1 || formData.commentType == 4">
				<view class="uni-label">入住满意度</view>
				<uni-rate class="uni-rate" :max="5" v-model="formData.checkInFeelScore" margin="8" />
			</uni-forms-item>
			
			<uni-forms-item class="uni-form-label" name="onlineScore" required v-if="formData.commentType == 1">
				<view class="uni-label">线上运营</view>
				<uni-rate class="uni-rate" :max="5" v-model="formData.onlineScore" margin="8" />
			</uni-forms-item>


			<uni-forms-item class="uni-form-label" name="propertyScore" required v-if="formData.commentType == 2">
				<view class="uni-label">物业服务</view>
				<uni-rate class="uni-rate" :max="5" v-model="formData.propertyScore" margin="8" />
			</uni-forms-item>
			<uni-forms-item class="uni-form-label" name="reletConvenienceScore" required v-if="formData.commentType == 2">
				<view class="uni-label">续租便捷度</view>
				<uni-rate class="uni-rate" :max="5" v-model="formData.reletConvenienceScore" margin="8" />
			</uni-forms-item>
			<uni-forms-item class="uni-form-label" name="overallScore" required v-if="formData.commentType == 2">
				<view class="uni-label">整体满意度</view>
				<uni-rate class="uni-rate" :max="5" v-model="formData.overallScore" margin="8" />
			</uni-forms-item>

			<uni-forms-item class="uni-form-label" name="livingScore" required v-if="formData.commentType == 3 || formData.commentType == 5">
				<view class="uni-label">居住舒适度</view>
				<uni-rate class="uni-rate" :max="5" v-model="formData.livingScore" margin="8" />
			</uni-forms-item>
			<uni-forms-item class="uni-form-label" name="rentOutConvenienceScore" required v-if="formData.commentType == 3 || formData.commentType == 5">
				<view class="uni-label">{{formData.commentType == 3?'退租便捷度':'迁出便捷度'}}</view>
				<uni-rate class="uni-rate" :max="5" v-model="formData.rentOutConvenienceScore" margin="8" />
			</uni-forms-item>
			<uni-forms-item class="uni-form-label" name="recommendScore" required v-if="formData.commentType == 3 || formData.commentType == 5">
				<view class="uni-label">二次入住与推荐</view>
				<uni-rate class="uni-rate" :max="5" v-model="formData.recommendScore" margin="8" />
			</uni-forms-item>
			<uni-forms-item class="uni-form-label" name="brandScore" required v-if="formData.commentType == 3 || formData.commentType == 5">
				<view class="uni-label">品牌总体评价</view>
				<uni-rate class="uni-rate" :max="5" v-model="formData.brandScore" margin="8" />
			</uni-forms-item>
			<view class="uni-sug">
				<view class="uni-sug-label">您的建议</view>
				<view class="uni-sug-t">
					<textarea class="uni-sug-textarea" maxlength="150" v-model="formData.content" placeholder="请填写服务内容"></textarea>
					<span class="span">{{formData.content&&formData.content.length || 0}}/150</span>
				</view>
			</view>
			<view class="uni-sug">
				<view class="uni-sug-label">上传图片:<span>（最多上次3张图片）</span></view>
				<view>
					<uploadImgs v-model="formData.picture" limit="3"></uploadImgs>
				</view>
			</view>
		</uni-forms>
		<button @click="submitForm" class="submit-btn">提交评价</button>
	</view>
</template>

<script setup lang="ts">
	import { reactive,ref } from 'vue'
	import { onLoad } from "@dcloudio/uni-app"
	import { setSuggestion } from "@/common/API/notice"
	import uploadImgs from '@/components/upload/uploadImgs.vue'
	
	let formData = reactive({
		commentType: null,//评价类型1-新租,2-续租,3-退租,4-企业入住人评价,5-员工迁出评价
		roomId: null,//房源id
		signDay: null,//签约日期
		stewardId: null,//管家id
		steward: null,//管家
		messageId: null
	})
	const flag = ref(false)
	const formRef = ref()
	
	//校验
	const formRules = {
	    stewardScore: {rules: [{required: true, errorMessage: "请选择评分！"}]},
		houseScore: {rules: [{required: true, errorMessage: "请选择评分！"}]},
		propertyEnvScore: {rules: [{required: true, errorMessage: "请选择评分！"}]},
		aroundSupportScore: {rules: [{required: true, errorMessage: "请选择评分！"}]},
		checkInFeelScore: {rules: [{required: true, errorMessage: "请选择评分！"}]},
		onlineScore: {rules: [{required: true, errorMessage: "请选择评分！"}]},
		
		propertyScore: {rules: [{required: true, errorMessage: "请选择评分！"}]},
		reletConvenienceScore: {rules: [{required: true, errorMessage: "请选择评分！"}]},
		overallScore: {rules: [{required: true, errorMessage: "请选择评分！"}]},
		
		livingScore: {rules: [{required: true, errorMessage: "请选择评分！"}]},
		rentOutConvenienceScore: {rules: [{required: true, errorMessage: "请选择评分！"}]},
		recommendScore: {rules: [{required: true, errorMessage: "请选择评分！"}]},
		brandScore: {rules: [{required: true, errorMessage: "请选择评分！"}]}
	}
	
	const formList1 = reactive({
		stewardScore: null,//管家服务
		houseScore: null,//房屋环境
		propertyEnvScore: null,//物业环境
		aroundSupportScore: null,//周边配套
		checkInFeelScore: null,//入住满意度
		onlineScore: null,//线上运营
		content: "",
		picture: [],
	})
	const formList2 = reactive({
		stewardScore: null,//管家服务
		propertyScore: null,//物业服务
		reletConvenienceScore: null,//续租便捷度
		overallScore: null,//整体满意度
		content: "",
		picture: []
	})
	const formList3 = reactive({
		stewardScore: null,//管家服务
		livingScore: null,//居住舒适度
		rentOutConvenienceScore: null,//退租、迁出便捷度
		recommendScore: null,//二次入住与推荐
		brandScore: null, //品牌总体评价
		content: "",
		picture: []
	})
	const formList4 = reactive({
		stewardScore: null,//管家服务
		houseScore: null,//房屋环境
		propertyEnvScore: null,//物业环境
		aroundSupportScore: null,//周边配套
		checkInFeelScore: null,//入住满意度
		content: "",
		picture: []
	})
	const formList5 = reactive({
		stewardScore: null,//管家服务
		livingScore: null,//居住舒适度
		rentOutConvenienceScore: null,//退租、迁出便捷度
		recommendScore: null,//二次入住与推荐
		brandScore: null, //品牌总体评价
		content: "",
		picture: []
	})
	//提交表单
	const submitForm = async () => {
		formRef.value.validate().then(async ({ valid, errors }: any) => {
			if (valid) {
			} else {
				//验证成功
				let infoObj = JSON.parse(JSON.stringify(formData))
				infoObj.picture = infoObj.picture.join(',')
				console.log(JSON.stringify(infoObj))
				
				let res = await setSuggestion(infoObj)
				if(res){
					uni.redirectTo({
						url: '/pages/personal/suggestion/index'
					})
				}
			}
		})
	}
	
	onLoad((options)=>{
		if(options){
			let info = JSON.parse(decodeURIComponent(options.info))
			// flag.value = info?.from == 'message'
			// if(flag.value){
			// 	formData.messageId = info.id
			// }
			if(info?.from == 'message'){
				flag.value = true
				formData.messageId = info.id
			}
			if(info?.from == 'suggestion'){
				flag.value = true
				formData.messageId = info.messageId
			}
			if(info.commentType == 1){//新租
				formData = reactive(Object.assign(formData, formList1))
			}
			if(info.commentType == 2){//续租
				formData = reactive(Object.assign(formData, formList2))
			}
			if(info.commentType == 3){//退租
				formData = reactive(Object.assign(formData, formList3))
			}
			if(info.commentType == 4){//企业员工入住
				formData = reactive(Object.assign(formData, formList4))
			}
			if(info.commentType == 5){//员工迁出
				formData = reactive(Object.assign(formData, formList5))
			}
			formData.commentType = info.commentType //类型
			formData.roomId = info.roomId //房源id
			formData.signDay =  info.signDay //签约日期
			formData.stewardId = info.stewardId //管家id
			formData.steward = info.steward //管家
			
		}
	})
</script>
<style>
	page {
		height: 100%;
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.suggestion-box {
		padding-bottom: 32rpx;
		.form-s {
			// padding: 0 28rpx;
		}
		.form-1 {
			display: flex;
			align-items: center;
			padding: 16rpx 0;
			border-bottom: 1px solid rgba(229, 229, 229, 1);
			.tags-icon {
				padding: 4rpx 16rpx;
				display: inline-block;
				color: #fff;
				border-radius: 4rpx;
				font-size: 40rpx;
				transform: scale(0.5);
				margin-right: -30rpx;
			}
			.view {
				flex: 1;
			}
			.color-icon-1 {
				background: rgba(67, 207, 124, 1);
			}
			.color-icon-2 {
				background: rgba(0, 178, 255, 1);
			}
			.color-icon-3 {
				background: rgba(242, 85, 85, 1);
			}
			.color-icon-4 {
				background: rgba(253, 150, 24, 1);
			}
		}
		:deep(.uni-forms){
			margin: 0 32rpx;
		}
		.uni-form-label{
			padding: 26rpx 0 20rpx 0;
			margin-bottom: 0;
			:deep(.uni-label){
				width: 350rpx;
			}
		}
		:deep(.uni-forms-item__content){
			display: flex;
			flex-direction: row;
			position: relative;
			align-items: center;
			padding: 10rpx 0;
		}
		:deep(.uni-rate){
			flex: 1;
			display: flex;
			justify-content: flex-end;
		}
		:deep(.uni-forms-item__label){
			padding: 0 4rpx 0 0;
		}
		
		:deep(.uni-sug-textarea){
			font-size: 28rpx;
			padding: 24rpx;
		}
		.uni-sug-t{
			width: 100%;
			// height: 316rpx;
			font-size: 28rpx;
			position: relative;
			background: rgba(245, 245, 245, 1);
			.span{
				position: absolute;
				right: 20rpx;
				bottom: 20rpx;
				color: rgba(153, 153, 153, 1);
				font-size: 24rpx;
			}
		}
		.submit-btn{
			margin: 94rpx 32rpx 40rpx 32rpx;
			border-radius: 200rpx;
			background: rgba(253, 150, 24, 1);
			color: #fff;
			border-radius: 200rpx;
			height: 84rpx;
			line-height: 84rpx;
		}
		:deep(.uni-forms-item){
			border-bottom: 1px solid rgba(229, 229, 229, 1);
			margin-bottom: 0;
			padding: 10rpx 0;
		}
		.uni-sug{
			margin-bottom: 0;
			display: block;
			
			.uni-sug-label{
				color: rgba(77, 77, 77, 1);
				font-size: 28rpx;
				padding: 20rpx 0;
				.span{
					font-size: 24rpx;
					color: rgba(153, 153, 153, 1);
				}
			}
		}
	}
	
</style>
